<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let stus=[]//初始化一个变量,保存所有的学生信息
			function loadStus(){
				let xhr=new XMLHttpRequest();
				xhr.open("GET","stu.xml",false)//false表示同步
				xhr.send();
				//接收、解析、显示数据
				let data=xhr.responseXML  //以xml来接收数据
				stus=data.getElementsByTagName("student")
				//stus=data.querySelectorAll("student")
				document.querySelector(".s1").value=stus[0].getAttribute("sno")
				document.getElementsByClassName("s2")[0].value=stus[0].getAttribute("sname")
			}
			let index=0;
			function next(){
				if(index!=stus.length){
					index++
					document.querySelector(".s1").value=stus[index].getAttribute("sno")
					document.getElementsByClassName("s2")[0].value=stus[index%stus.length].getAttribute("sname")
				}else{
					index=0
					document.querySelector(".s1").value=stus[index].getAttribute("sno")
					document.getElementsByClassName("s2")[0].value=stus[index%stus.length].getAttribute("sname")
				}
			}
		</script>
	</head>
	<body onload="loadStus()">
		学号：<input type="text" class="s1"/><br>
		姓名：<input type="text" class="s2"/>
		<button type="button" onclick="next()">下一个</button>
	</body>
</html>
